<template>
  <Card :bordered="false">
    <div slot="title" class="clear">
      <Button type="primary" class="addBtn" @click="showOrgModal('add')">新增</Button>
    </div>
    <div v-if="allOrgList.length">
      <div v-for="(item, index) in allOrgList" :key="index" class="treeBox" >
        <Tree :data="item" :render="renderContent" />
      </div>
    </div>
    <p v-else>暂无数据</p>
    <AddOrgModal
      ref="orgModal"
      :modalTitle="modalTitle"
      @handleSubmit="handleSubmit"
    />
    <DetailModal
      ref="detailModal"
    />
  </Card>
</template>

<script>
import { Divider } from 'iview'
import AddOrgModal from './components/AddOrgModal'
import DetailModal from './components/DetailModal'
import { queryAllOrgList, deleteOrg } from '@/api/organization.js'
import { addProp } from '@/libs/util.js'

export default {
  name: 'organization',
  components: {AddOrgModal, DetailModal},
  data () {
    return {
      modalTitle: '新增架构',
      allOrgList: [],
      orgDataSource: [] // 组织架构数据源
    }
  },
  methods: {
    showOrgModal (type, deptCode = '') {
      if (type === 'add') {
        this.modalTitle = '新增架构'
      } else {
        this.modalTitle = '编辑架构'
      }
      this.$refs['orgModal'].showModal(type, deptCode)
    },
    handleSubmit () {
      this.getAllOrgList()
    },
    renderContent (h, {data}) {
      return (
        <span style="display: inline-block; width: 100%">
          <span>{data.title}</span>
          <span style="display: inline-block; float: right; margin-right: 32px">
            <a onClick={() => this.showOrgModal('add', data.id)}>创建下一级</a>
            <Divider type="vertical" />
            <a onClick={() => this.queryDetail(data.id)}>查看详情</a>
            <Divider type="vertical" />
            <a onClick={() => this.showOrgModal('edit', data.id)}>编辑</a>
            <Divider type="vertical" />
            <a onClick={() => this.handleDelete(data.id)}>删除</a>
          </span>
        </span>
      )
    },
    queryDetail (deptCode) {
      this.$refs['detailModal'].showModal(deptCode)
    },
    handleDelete (orgId) {
      const self = this
      this.$Modal.confirm({
        title: '您确定删除该架构？',
        content: '',
        onOk: function () {
          deleteOrg(orgId).then((response) => {
            const { data } = response
            if (data.code === 2000) {
              this.$Message.success('删除成功')
              self.getAllOrgList()
            } else {
              this.$Message.error(data.msg || '系统错误，请稍后再试')
            }
          })
        }
      })
    },
    getAllOrgList () {
      const list = []
      queryAllOrgList().then((response) => {
        const { data } = response
        if (data.code === 2000) {
          if (data.data) {
            addProp(data.data).map(item => {
              list.push([item])
            })
          }
          this.allOrgList = list
        } else {
          this.$Message.error(data.msg || '系统错误，请稍后再试')
        }
        this.loading = false
      })
    }
  },

  mounted () {
    this.getAllOrgList()
  }
}
</script>
<style lang="less">
  .addBtn {
    float: right;
  }
  .treeBox {
    padding: 15px 0;
    border-bottom: 1px solid #dedede
  }
  .treeBox:last-child {
    border-bottom: none
  }
</style>
